<div fxLayout="row wrap" fxLayoutAlign="stretch" fxLayout.lt-md="column">
  <!-- class="height100" -->
  <div
    fxLayout="row wrap"
    fxLayoutAlign="stretch"
    fxLayout.lt-md="column"
    fxFlex="75"
  >
    <!-- class="height100" -->
    <div fxFlex="50" class="research-container">
      <h2>Backlog</h2>
      <div
        cdkDropList
        #todoList="cdkDropList"
        [cdkDropListData]="ms.game.researchManager.backlog"
        [cdkDropListConnectedTo]="[doneList]"
        class="job-list"
        (cdkDropListDropped)="drop($event)"
        id="backlog"
      >
        <ng-container
          *ngFor="
            let resToDo of ms.game.researchManager.backlog;
            trackBy: getResId
          "
        >
          <app-job
            cdkDrag
            class="job-box"
            [job]="resToDo"
            [collection]="ms.game.researchManager.backlog"
            [showDescription]="false"
            nz-popover
            [nzPopoverContent]="contentTemplate"
          >
          </app-job>
          <ng-template #contentTemplate>
            <app-research-preview [research]="resToDo"></app-research-preview>
          </ng-template>
        </ng-container>
      </div>
    </div>
    <div fxFlex="50" class="research-container">
      <h2>To do</h2>
      <div
        cdkDropList
        #doneList="cdkDropList"
        [cdkDropListData]="ms.game.researchManager.toDo"
        [cdkDropListConnectedTo]="[todoList]"
        class="job-list"
        (cdkDropListDropped)="drop($event)"
        id="toDo"
      >
        <ng-container
          *ngFor="
            let resToDo of ms.game.researchManager.toDo;
            trackBy: getResId
          "
        >
          <app-job
            cdkDrag
            class="job-box"
            (cdkDragStarted)="start($event)"
            (cdkDragEnded)="end($event)"
            [job]="resToDo"
            [collection]="ms.game.researchManager.toDo"
            [showDescription]="false"
            nz-popover
            [nzPopoverContent]="contentTemplate"
          >
          </app-job>
          <ng-template #contentTemplate>
            <app-research-preview [research]="resToDo"></app-research-preview>
          </ng-template>
        </ng-container>
      </div>
    </div>
  </div>

  <div fxFlex="25" class="info-div" fxLayoutGap="1rem">
    <div>
      <strong>Research /s: </strong>
      <span class="monospace">{{
        ms.game.researchManager.researchPerSec | format
      }}</span>
    </div>
    <div>
      <strong>Technology /s: </strong>
      <span class="monospace">{{
        ms.game.researchManager.techPerSec | format
      }}</span>
    </div>
    <div>
      Research Priority:
      <nz-input-number
        [(ngModel)]="ms.game.researchManager.researchPriority"
        nzMin="0"
        nzMax="100"
        nzStep="1"
        nzSize="small"
      ></nz-input-number>
      <nz-slider
        [(ngModel)]="ms.game.researchManager.researchPriority"
      ></nz-slider>
    </div>

    <div>
      <label nz-checkbox [(ngModel)]="ms.game.researchManager.sort"
        >Auto Sort</label
      >
      <label nz-checkbox [(ngModel)]="ms.game.researchManager.newJobsOnBacklog"
        >New on BackLog</label
      >
    </div>

    <button nz-button nz-type="default" id="sort-btn" (click)="sort()">
      <i nz-icon nzType="sort-ascending" nzTheme="outline"></i>
      <span>Sort</span>
    </button>

    <div>
      <label>Auto Origin:</label>
      <nz-select [(ngModel)]="ms.game.researchManager.autoOrigin">
        <nz-option
          [nzValue]="origin"
          [nzLabel]="origin.name"
          *ngFor="let origin of origins; trackBy: getResId"
        ></nz-option>
      </nz-select>
    </div>
    <div>
      <label>Auto Specialization:</label>
      <nz-select [(ngModel)]="ms.game.researchManager.autoSpecialization">
        <nz-option
          [nzValue]="spec"
          [nzLabel]="spec.name"
          *ngFor="let spec of specializations; trackBy: getResId"
        ></nz-option>
      </nz-select>
    </div>

    <div>
      <strong>Tech. Bonuses </strong>
      <i
        class="info-icon"
        nz-icon
        nzType="info-circle"
        nzTheme="outline"
        nz-tooltip
        nzTooltipTitle="Technologies grant research bonus equal to 5% x tech. level"
      ></i>

      <ul class="list-unstyled">
        <li
          *ngFor="
            let item of ms.game.researchManager.unlockedTechnologies;
            trackBy: getTypeId
          "
        >
          <span [style.color]="item.color"
            ><i nz-icon [nzType]="item.icon"></i
          ></span>

          {{ item.name }}
          <span class="monospace"
            >+{{ item.bonus.totalBonusUi | format }}%</span
          >
        </li>
      </ul>
    </div>
  </div>
</div>
